<template>
  <div id="echarts4"></div>
</template>

<script>
import * as echarts from "echarts";



export default {
  name: "Echarts4",
  data() {
    return {
      echarts: ''
    }
  },
  mounted() {
    this.initEcharts()
    // this.setEChartsOptions()
  },
  methods: {
    initEcharts() {
      const chartDom = document.getElementById('echarts4')
      this.echarts = echarts.init(chartDom)

    },

    setEChartsOptions(data) {
      const {label, data1, data2} = this.formatData(data)
      // console.log(label, data1, data2)
      const option = {
        title: {
          text: '工期参考:'
        },
        legend: {
          bottom: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: label
        },
        tooltip: {
          trigger: 'item',
          // formatter: function(params){
          //   console.log(params)
          // }
        },
        series: [
          {
            name: '参考线',
            type: 'line',
            // stack: 'total',
            // label: {
            //   show: true
            // },
            data: data1
          },
          {
            name: '实际线',
            type: 'line',
            // stack: 'total',
            // label: {
            //   show: true
            // },
            data: data2,
            itemStyle: {
              normal: {
                lineStyle: {
                  type: "dashed"
                }
              }
            }
          }
        ]
      };
      this.echarts && this.echarts.setOption(option);
    },

    // TODO : 数据格式化任然存在问题，后续解决
    formatData(data) {
      // console.log(data)
      const workDays = data.residue_work_hours
      const planWorkHour = data.plan_work_hour
      const {plan_start_at, plan_complete_at} = data
      const startNum = data.start_at.length > 2 ? Date.parse(data.plan_start_at) > Date.parse(data.start_at) ?Date.parse(data.start_at): Date.parse(data.plan_start_at)  : Date.parse(data.plan_start_at)
      const completeNum = data.complete_at.length > 2 ? Date.parse(data.plan_complete_at) > Date.parse(data.complete_at) ? Date.parse(data.plan_complete_at) : Date.parse(data.complete_at) : Date.parse(data.plan_complete_at)
      const startDate = new Date(startNum)
      const endDate = new Date(completeNum)
      const label = []
      const data1 = []
      const data2 = []
      // console.log(startDate,endDate)


      // if ((completeNum - startNum) > 6 * 30 * 24 * 60 * 60 * 1000) {
      //   //计算 x轴数据label O.o
      //   startDate.setDate(1)
      //   endDate.setDate(1)
      //   while (startDate.getTime() <= endDate.getTime()) {
      //     label.push(`${startDate.getFullYear()}-${startDate.getMonth() + 1}`)
      //     startDate.setMonth(startDate.getMonth() + 1)
      //   }
      //
      //   //计算data2
      //   let index = 0, day = planWorkHour
      //   for (let i = 0; i < label.length; i++) {
      //     if (new Date(label[i]).getMonth() > new Date().getMonth()) {
      //       break
      //     }
      //     if (new Date(workDays[index]?.complete_at).getMonth() == new Date(label[i]).getMonth() && new Date(workDays[index]?.complete_at).getFullYear() == new Date(label[i]).getFullYear() && workDays.length) {
      //       day = workDays[index].work_day
      //       index++
      //     }
      //     data2.push(day)
      //   }
      //
      //
      //   console.log('month')
      // } else if ((completeNum - startNum) > 1 * 30 * 24 * 60 * 60 * 1000) {
      //   while (startDate.getTime() <= endDate.getTime()) {
      //     label.push(`${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`)
      //     startDate.setDate(startDate.getDate() + 7)
      //   }
      //   label.push(`${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`)
      //   let index = 0, day = planWorkHour
      //   for (let i = 0; i < label.length; i++) {
      //
      //
      //
      //     if (Date.parse(workDays[index]?.complete_at) >= Date.parse(label[i]) + 28800000 - 345600000 && Date.parse(workDays[index]?.complete_at) <= Date.parse(label[i]) + 28800000 + 259200000 && workDays.length) {
      //       day = workDays[index].work_day
      //       index++
      //     }
      //
      //     if (Date.parse(label[i]) + 28800000 - 259200000 > Date.now()) {
      //       day = null
      //     }
      //
      //     data2.push(day)
      //   }
      //
      //   console.log('week')
      // } else {
        while (startDate.getTime() <= endDate.getTime()) {
          label.push(`${startDate.getFullYear()}-${startDate.getMonth() + 1}-${startDate.getDate()}`)
          startDate.setDate(startDate.getDate() + 1)
        }

        let index = 0, hour = planWorkHour
        for (let i = 0; i < label.length; i++) {
          if (Date.parse(label[i]) + 28800000 > Date.now()) {
            break
          }
          if (Date.parse(workDays[index]?.date) == Date.parse(label[i]) + 28800000 && workDays.length) {
            // console.log(workDays[index]?.date,label[i])
            hour = workDays[index].work_hour
            index++
          }

          data2.push(hour)
        }


        //计算data1
        const CD = `${new Date(plan_complete_at).getFullYear()}-${new Date(plan_complete_at).getMonth() + 1}-${new Date(plan_complete_at).getDate()}`
        const SD = `${new Date(plan_start_at).getFullYear()}-${new Date(plan_start_at).getMonth() + 1}-${new Date(plan_start_at).getDate()}`
        for (let i = 0; i < label.length; i++) {
          let flag = CD === label[i],flag2 = SD === label[i]
          if (flag) data1.push([CD,0])
          if (flag2) data1.push([SD,planWorkHour])
        }
        // console.log(data1,'DATA1')
        // console.log("day")
      // }


      //计算data1
      // for (let i = label.length - 1; i >= 0; i--) {
      //   data1.push((planWorkHour / (label.length - 1) * i).toFixed(2))
      // }
      return {label, data1, data2}
    },
  }
}
</script>

<style scoped lang="scss">
#echarts4 {
  width: 100%;
  height: 100%;
}
</style>
